<script src="<?php echo $this->basePath('js/plugins/echarts/echarts.min.js'); ?>"></script>
<script src="<?php echo $this->basePath('js/plugins/echarts/theme/shine.js'); ?>"></script>
<div class="content-wrapper">
    <section class="content-header">
        <?php echo $this->partial('layout/breadcrumb'); ?>
        <h1 class="pull-right" id="dbshop-menu-top">
            <?php echo $this->HelpUrl('orderStatistics'); ?>
        </h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-body">
                        <h2 class="page-header">
                            <?php echo $this->translate('订单统计'); ?>
                        </h2>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td><span class="text-bold"><?php echo $this->translate('今日订单'); ?>：</span><?php echo $this->todayOrderNum; ?></td>
                                    <td><span class="text-bold"><?php echo $this->translate('本周订单'); ?>：</span><?php echo $this->weekOrderNum; ?></td>
                                    <td><span class="text-bold"><?php echo $this->translate('本月订单'); ?>：</span><?php echo $this->monthOrderNum; ?></td>
                                    <td><span class="text-bold"><?php echo $this->translate('全部订单'); ?>：</span><?php echo $this->orderNum; ?></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <?php
                            $form = $this->form;
                            $form->prepare();
                            echo $this->form()->openTag($form);
                            ?>
                            <div class="col-xs-5 text-right">
                                <a href="<?php echo $this->url('analysis', ['action' => 'orderStatistics'], ['query' => ['type' => 'week', 'userGroupId' => $form->get('userGroupId')->getValue()]]); ?>" class="btn <?php echo $this->type == 'week' ? 'btn-primary' : 'btn-default'; ?>"><?php echo $this->translate('本周'); ?></a>
                                &nbsp;&nbsp;
                                <a href="<?php echo $this->url('analysis', ['action' => 'orderStatistics'], ['query' => ['type' => 'month', 'userGroupId' => $form->get('userGroupId')->getValue()]]); ?>" class="btn <?php echo $this->type == 'month' ? 'btn-primary' : 'btn-default'; ?>"><?php echo $this->translate('本月'); ?></a>
                            </div>
                            <div class="col-xs-2">
                                <?php echo $this->formElement($form->get('userGroupId')); ?>
                            </div>
                            <div class="col-xs-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                    <?php echo $this->formElement($form->get('startDate')); ?>
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                    <?php echo $this->formElement($form->get('endDate')); ?>
                                </div>
                            </div>
                            <div class="col-xs-1">
                                <button type="submit" class="btn btn-info"><?php echo $this->translate('查看'); ?></button>
                            </div>
                            <?php echo $this->form()->closeTag(); ?>
                        </div>
                        <div id="order_chart" style="width: 100%;height: 400px;margin-top: 40px;">
                        </div>

                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td width="50%">
                                    <div id="payment_type_chart" style="width: 100%;height: 400px;margin-top: 40px;">
                                    </div>
                                </td>
                                <td width="50%">
                                    <div id="express_type_chart" style="width: 100%;height: 400px;margin-top: 40px;">
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>

    </section>
</div>
<script>
    laydate.render({elem: '#startDate'});
    laydate.render({elem: '#endDate'});

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('order_chart'), 'shine');
    option = {
        title: {
            text: '<?php echo $this->translate('订单统计图表'); ?>'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['<?php echo $this->translate('订单数'); ?>', '<?php echo $this->translate('付款订单数'); ?>']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : [<?php echo $this->dataStr; ?>]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'<?php echo $this->translate('订单数'); ?>',
                type:'bar',
                data:[<?php echo $this->orderStr; ?>]
            },
            {
                name:'<?php echo $this->translate('付款订单数'); ?>',
                type:'bar',
                data:[<?php echo $this->orderPayStr; ?>]
            }
        ]
    };
    myChart.setOption(option);

    var paymentChart = echarts.init(document.getElementById('payment_type_chart'), 'shine');
    option = {
        title : {
            text: '<?php echo $this->translate('支付方式统计'); ?>',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [<?php echo $this->paymentStr; ?>]
        },
        series : [
            {
                name: '<?php echo $this->translate('支付方式'); ?>',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[<?php
                    $paymentStr = '';
                    foreach ($this->paymentArray as $paymentKey => $paymentValue) {
                        if (isset($this->paymentOrderCountArray[$paymentKey])) $paymentStr .= "{value:".$this->paymentOrderCountArray[$paymentKey]['num'].", name:".$this->paymentOrderCountArray[$paymentKey]['name']."},";
                        else $paymentStr .= "{value:0, name:".$paymentValue."},";
                    }
                    if (!empty($paymentStr)) $paymentStr = rtrim($paymentStr, ',');
                    echo $paymentStr;
                    ?>],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    paymentChart.setOption(option);

    var expressChart = echarts.init(document.getElementById('express_type_chart'), 'shine');
    option = {
        title : {
            text: '<?php echo $this->translate('配送方式统计'); ?>',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [<?php echo $this->deliveryStr; ?>]
        },
        series : [
            {
                name: '<?php echo $this->translate('配送方式'); ?>',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[<?php
                    $deliveryStr = '';
                    foreach ($this->deliveryArray AS $dKey => $dValue) {
                        if (isset($this->deliveryOrderCountArray[$dKey])) $deliveryStr .= "{value:".$this->deliveryOrderCountArray[$dKey]['num'].", name:'".$this->deliveryOrderCountArray[$dKey]['name']."'},";
                        else $deliveryStr .= "{value:0, name:'".$dValue."'},";
                    }
                    if (!empty($deliveryStr)) $deliveryStr = rtrim($deliveryStr, ',');
                    echo $deliveryStr;
                    ?>],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    expressChart.setOption(option);
</script>